<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="支付" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-bg-white coreshop-solid-bottom coreshop-padding-15">
            <u-icon name="checkmark-circle" size="16" color="orange" labelColor="orange" label="支付信息" labelSize="15px"></u-icon>
        </view>
        <!--商品信息-->
        <view class="coreshop-list menu">
            <view class="coreshop-list-item">
                <view class="content">
                    <text class="coreshop-text-grey">订单类型</text>
                </view>
                <view class="action">
                    <text class="coreshop-font-sm coreshop-text-gray" v-if="type == $globalConstVars.paymentType.common || type == $globalConstVars.paymentType.pinTuan || type == $globalConstVars.paymentType.group || type == $globalConstVars.paymentType.seckill || type == this.$globalConstVars.paymentType.bargain || type == this.$globalConstVars.paymentType.giveaway || type == $globalConstVars.paymentType.solitaire || type == $globalConstVars.paymentType.transactionComponent">商品订单</text>
                    <text class="coreshop-font-sm coreshop-text-gray" v-if="type == $globalConstVars.paymentType.recharge" @click="toRecharge()">充值订单</text>
                    <text class="coreshop-font-sm coreshop-text-gray" v-if="type == $globalConstVars.paymentType.formPay">付款码</text>
                    <text class="coreshop-font-sm coreshop-text-gray" v-if="type == $globalConstVars.paymentType.formOrder">表单订单</text>
                    <text class="coreshop-font-sm coreshop-text-gray" v-if="type == $globalConstVars.paymentType.serviceOrder">服务订单</text>
                </view>
            </view>
            <template v-if="type == $globalConstVars.paymentType.common || type == $globalConstVars.paymentType.pinTuan || type == $globalConstVars.paymentType.group || type == $globalConstVars.paymentType.seckill || type == this.$globalConstVars.paymentType.bargain || type == this.$globalConstVars.paymentType.giveaway || type == $globalConstVars.paymentType.solitaire || type == $globalConstVars.paymentType.transactionComponent">
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">订单编号</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-grey coreshop-font-sm" v-for="(item, index) in orderInfo.rel" :key="index" @click="goOrderDetail(item.sourceId)">{{ item.sourceId || '' }}</text>
                    </view>
                </view>
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">订单金额</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ orderInfo.money || '' }}</text>
                    </view>
                </view>
            </template>
            <template v-else-if="type == $globalConstVars.paymentType.recharge">
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">充值规则</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-font-sm coreshop-text-gray">{{ topUpType.title }}</text>
                    </view>
                </view>
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">支付金额</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ topUpType.defaultMoney }}</text>
                    </view>
                </view>
                <view class="coreshop-list-item" v-if="topUpType.giftMoney>0">
                    <view class="content">
                        <text class="coreshop-text-grey">赠送金额</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-price coreshop-text-gray coreshop-font-lg">{{ topUpType.giftMoney }}</text>
                    </view>
                </view>
                <view class="coreshop-list-item" v-if="topUpType.giftPoint>0">
                    <view class="content">
                        <text class="coreshop-font-sm coreshop-text-gray">赠送积分</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-font-sm coreshop-text-gray">{{ topUpType.giftPoint }}</text>
                    </view>
                </view>
            </template>
            <template v-else-if="type == $globalConstVars.paymentType.serviceOrder">
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">购买服务</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-font-sm coreshop-text-gray">{{ serviceInfo.title || '' }}</text>
                    </view>
                </view>
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">服务金额</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ serviceInfo.money || '' }}</text>
                    </view>
                </view>
            </template>
            <template v-else>
                <view class="coreshop-list-item">
                    <view class="content">
                        <text class="coreshop-text-grey">支付金额</text>
                    </view>
                    <view class="action">
                        <text class="coreshop-text-price coreshop-text-red coreshop-font-lg">{{ recharge || '' }}</text>
                    </view>
                </view>
            </template>

        </view>

        <view class="coreshop-bg-white coreshop-solid-bottom coreshop-padding-15  coreshop-margin-top-15">
            <u-icon name="checkmark-circle" size="16" color="orange" labelColor="orange" label="请点击选择以下支付方式" labelSize="15px"></u-icon>
        </view>

        <!--支付方式-->
        <view class="content">
            <!-- #ifdef MP-WEIXIN -->
            <payments-by-wx :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-wx>
            <!-- #endif -->
            <!-- #ifdef MP-ALIPAY -->
            <payments-by-ali :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-ali>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
            <payments-by-app :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-app>
            <!-- #endif -->
            <!-- #ifdef MP-TOUTIAO -->
            <payments-by-tt :orderId="orderId" :recharge="recharge" :type="type" :uid="userInfo.id"></payments-by-tt>
            <!-- #endif -->
        </view>
        <!--提示信息-->
        <view class="coreshop-text-gray coreshop-padding-10 coreshop-font-sm">
            注：如果您在支付中选择的支付方式不适合或异常，请再次选择其他支付方式。
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>
<script>
    // #ifdef MP-WEIXIN
    import paymentsByWx from '@/pages/payment/components/coreshop-paymentsByWx.vue';
    // #endif
    // #ifdef MP-ALIPAY
    import paymentsByAli from '@/pages/payment/components/coreshop-paymentsByAli.vue';
    // #endif
    // #ifdef APP-PLUS || APP-PLUS-NVUE
    import paymentsByApp from '@/pages/payment/components/coreshop-paymentsByApp.vue';
    // #endif
    // #ifdef MP-TOUTIAO
    import paymentsByTt from '@/pages/payment/components/coreshop-paymentsByTt.vue';
    // #endif
    export default {

        data() {
            return {
                orderId: 0,
                recharge: 0,
                serviceId: 0, //服务编号
                type: 1, // 订单类型
                orderInfo: {}, // 订单详情
                userInfo: {}, // 用户信息
                serviceInfo: {}, // 服务信息
                topUpType: {}, // 充值类型信息
                formId: 0,
            };
        },
        components: {
            // #ifdef MP-WEIXIN
            paymentsByWx,
            // #endif
            // #ifdef MP-ALIPAY
            paymentsByAli,
            // #endif
            // #ifdef APP-PLUS || APP-PLUS-NVUE
            paymentsByApp,
            // #endif
            // #ifdef MP-TOUTIAO
            paymentsByTt
            // #endif
        },
        onLoad(options) {
            this.orderId = options.orderId;
            this.serviceId = Number(options.serviceId);
            this.recharge = Number(options.recharge);
            this.type = Number(options.type);
            this.formId = Number(options.formId);

            console.log(this.recharge);

            if (this.orderId && (this.type == this.$globalConstVars.paymentType.common || this.type == this.$globalConstVars.paymentType.pinTuan || this.type == this.$globalConstVars.paymentType.group || this.type == this.$globalConstVars.paymentType.seckill || this.type == this.$globalConstVars.paymentType.bargain || this.type == this.$globalConstVars.paymentType.giveaway || this.type == this.$globalConstVars.paymentType.solitaire || this.type == this.$globalConstVars.paymentType.transactionComponent)) {
                // 商品订单
                this.getOrderInfo();
            } else if (this.recharge > 0 && this.type == this.$globalConstVars.paymentType.recharge) {
                // 充值订单 获取用户id
                this.getTypeDetail();
                this.getUserInfo();
            } else if (this.formId && (this.type == this.$globalConstVars.paymentType.formPay || this.type == this.$globalConstVars.paymentType.formOrder)) {
                // 表单订单 id传到订单上
                this.orderId = '' + this.formId;
            } else if (this.type == this.$globalConstVars.paymentType.serviceOrder) {
                this.getServiceDetail();
            }
            else {
                this.$refs.uToast.show({
                    message: '订单支付参数错误', type: 'error', complete: function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                });
            }
        },
        methods: {
            // 获取订单详情
            getOrderInfo() {
                let data = {
                    ids: this.orderId,
                    paymentType: this.type
                };
                this.$u.api.paymentsCheckpay(data).then(res => {
                    if (res.status) {
                        this.orderInfo = res.data;
                    }
                });
            },
            //获取服务详情
            getServiceDetail() {
                let data = {
                    id: this.serviceId
                };
                this.$u.api.getServiceDetail(data).then(res => {
                    if (res.status) {
                        this.serviceInfo = res.data;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            //获取单个充值规则
            getTypeDetail() {
                let data = {
                    id: this.recharge
                };
                this.$u.api.getTypeDetail(data).then(res => {
                    if (res.status) {
                        this.topUpType = res.data;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 获取用户信息
            getUserInfo() {
                this.$u.api.userInfo().then(res => {
                    if (res.status) {
                        this.userInfo = res.data;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            // 跳转我的余额页面
            toRecharge() {
                this.$u.route('/pages/member/balance/index/index');
            }
        }
    };
</script>
<style lang="scss">
    @import "pay.scss";
</style>
